<template>
  <a-modal v-model:open="open" width="90%"
           :footer="null"
           style="top: 20px"
           title="赋予角色列表"
           :keyboard="false"
           :mask-closable="false"
           @cancel="handleClose">
  <div>
      <a-table
              :columns="columns"
               rowClassName="items"
               :loading="tableLoading"
               rowKey="id"
               :scroll="{ x: 'calc(100vw - 326px)', y: 'calc(100vh - 245px)' }"
               :pagination="false"
               :data-source="tableData"
               style="height:calc(100vh - 305px)"
               size="middle" sticky bordered>
        <template #bodyCell="{ column,text,record,index }">
          <template v-if="column.dataIndex==='username'">
           <div class="flex">
             <img :src="record.avatar" class="avatar" style="width: 24px;height: 24px;border-radius: 50%;">
             <span class="ml10">{{record.username}}</span>
           </div>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <div class="editable-row-operations">
              <span class="mr5">
                <a-button v-if="record.bindFlag" type="primary" class="mainbg" @click="handleCancleBindRoles(record.id)" size="small"> <template #icon><CloseOutlined style="font-size:12px"/></template>取消绑定</a-button>
                <a-button v-else type="primary" style="background:#4954e6;" @click="handleBindRoles(record.id)" size="small"> <template #icon><CheckOutlined style="font-size:12px"/></template>选择绑定</a-button>
              </span>
            </div>
          </template>
        </template>
      </a-table>
      <div class="flex  mt20">
        <a-pagination
            v-model:current="queryParams.pageNo"
            v-model:page-size="queryParams.pageSize"
            @change="handleChangePageNo"
            :page-size-options="pageSizeOptions"
            show-size-changer
            :total="total"/>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
const open = ref(false)
const tableLoading = ref(false)
const total = ref(0)
const tableData = ref([]);
const pageSizeOptions = ref(['10', '20', '30', '40', '50']);
const emits = defineEmits(["success"])
const queryParams = reactive({
  pageNo: 1,
  pageSize: 20,
  userId:"",
  status:1,
  keyword:''
})

const columns = [
  {title: '序号', width: 80, dataIndex: 'index',align:"center", fixed: 'left',customRender:({text,record,index})=>index+1},
  {title: '主键', width: 200, dataIndex: 'id',align:"center", fixed: 'left'},
  {title: '角色名称', width: 200, dataIndex: 'roleName',align:"center", fixed: 'left'},
  {
    title: '操作',
    dataIndex: 'operation',
    fixed: 'right',
    align: "center",
    width: 400,
  },
];


/**
 * 查询列表数据
 */
const handleLoadData = async ()=>{
  tableLoading.value = true
  const resp = await userLoadRoleApi(queryParams)
  tableLoading.value = false
  tableData.value = resp.data.records
  total.value = resp.data.total
}

// 改变分页查询
const handleChangePageNo = (pno, psize) => {
  queryParams.pageNo = pno;
  queryParams.pageSize = psize;
  handleLoadData()
}

// 绑定角色
const handleBindRoles = async(id) => {
  await useHandleBindRoleApi({userId:queryParams.userId,roleId:id})
  tableData.value.find(c=>c.id==id).bindFlag = true
  useMessage().success("绑定成功!!!")
}

// 取消绑定
const handleCancleBindRoles = async(id) => {
  await useHandleCancleRoleApi({userId:queryParams.userId,roleId:id})
  tableData.value.find(c=>c.id==id).bindFlag = false
  useMessage().success("取消绑定成功!!!")
}

const handleClose = ()=>{
  open.value = false;
  emits("success")
}

const handleOpen = (userId)=>{
  open.value = true;
  queryParams.userId = userId;
  handleLoadData()
}

defineExpose({
  handleOpen
})
</script>

